<script setup lang="ts">
import  type { Good } from "@/types/homeTypes/homeTypes.ts";

interface Props{
   good:Good
}
defineProps<Props>()
</script>

<template>
   <div class="product-item">
      <RouterLink :to="{name:'detail',params:{id:good.id}}" class="image">
         <img v-lazy="good.picture" alt="" />
      </RouterLink>
      <p class="name ellipsis">{{good.name}}</p>
      <p class="desc ellipsis">{{good.desc}}</p>
      <p class="price">&yen;{{ good.price}}</p>
      <div class="extra">
         <RouterLink to="/">
            <span>找相似</span>
            <span>发现现多宝贝</span>
         </RouterLink>
      </div>
   </div>
</template>

<style scoped lang="less">
.product-item{
   width: 240px;
   height: 300px;
   padding: 10px 30px;
   position: relative;
   overflow: hidden;
   border: 1px solid transparent;
   transition: all .5s;

   .image {
      display: block;
      width: 160px;
      height: 160px;
      margin: 0 auto;

      img {
         width: 100%;
         height: 100%;
      }
   }

   p {
      margin-top: 6px;
      font-size: 16px;
      line-height: 25px;
      &.name {

      }

      &.desc {
         color: #666;
         height: 22px;
      }

      &.price {
         text-align: center;
         margin-top: 10px;
         font-size: 20px;
         color: @priceColor;
      }
   }

   .extra {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 86px;
      width: 100%;
      background: @xtxColor;
      text-align: center;
      transform: translate3d(0, 100%, 0);
      transition: all .5s;

      span {
         display: block;
         color: #fff;
         width: 120px;
         margin: 0 auto;
         line-height: 30px;

         &:first-child {
            font-size: 18px;
            border-bottom: 1px solid #fff;
            line-height: 40px;
            margin-top: 5px;
         }
      }
   }

   &:hover {
      border-color: @xtxColor;

      .extra {
         transform: none;
      }
   }
}
</style>
